<script setup lang="ts">
import { onMounted } from 'vue'

// ------------------use------------------
// #region
const { $message } = useCurrentInstance()
const { vLoading, withLoading } = useDefineLoading()
const [tableData, setTableData] = useState<any[]>([])
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const contentType = ref<string>('粗略')
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  await withLoading(sleep)(1000)
  setTableData(Array.from({ length: 20 }).fill(0))
}
function save() {
  $message.success('数据保存成功！')
  getTableData()
}
// #endregion
</script>

<template>
  <div
    class="padding-sm flex-direction box-border flex container"
  >
    <div
      class="flex-incompressible flex flex-wrap justify-between align-start"
    >
      <el-form
        inline
        label-width="40px"
        label-position="left"
        class=""
      >
        <el-form-item>
          <el-select placeholder="请选择类型">
            <el-option label="月" value="month" />
            <el-option label="日" value="day" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            type="date"
            placeholder="请选择填报日期"
            @change="getTableData"
          />
        </el-form-item>
        <el-form-item>
          <el-button plain type="primary" @click="save">
            保存
          </el-button>
        </el-form-item>
      </el-form>
      <el-radio-group
        v-model="contentType"
        @change="getTableData"
      >
        <el-radio-button label="粗略" />
        <el-radio-button label="详细" />
      </el-radio-group>
    </div>
    <div v-loading class="flex-fillRemaining overflow">
      <el-table
        v-if="contentType === '粗略'"
        :data="tableData"
        class="height-fill"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column label="能源种类">
          其它原煤
        </el-table-column>
        <el-table-column label="单位">
          吨标准煤/吨
        </el-table-column>
        <el-table-column label="参考" width="230">
          <el-input
            clearable
            size="small"
            style="width: 200px"
          />
        </el-table-column>
      </el-table>
      <el-table
        v-else
        :data="tableData"
        class="height-fill"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column label="能源种类">
          其它原煤
        </el-table-column>
        <el-table-column label="单位">
          吨标准煤/吨
        </el-table-column>
        <el-table-column label="参考" width="230">
          <el-input
            clearable
            size="small"
            style="width: 200px"
          />
        </el-table-column>
        <el-table-column label="名称" width="260">
          00-00_一次能源-其它原煤折标系数
        </el-table-column>
        <el-table-column label="工序">
          全厂
        </el-table-column>
        <el-table-column label="工序单元">
          全厂
        </el-table-column>
        <el-table-column label="填报" width="230">
          <el-input
            clearable
            size="small"
            style="width: 200px"
          />
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
